<template>
  <div style="background: #333;margin-top: 20px">
    <el-row :gutter="20" style="width: 60%;margin-left: 20%">

      <el-col :span="4" v-for="dat in pageData" :key="dat.yid">
        <div class="grid-content bg-purple">
          <ul style="width: 80px">
            <li class="m_header">{{dat.btitle}}</li>
            <li class="m_row"></li>
              <div v-for="d in dat.children" :key="d.yid">
                <li>
                  <a href="http://www.4399.com/" target="_blank">{{d.btitle}}</a>
                </li>

                <!--<li>
                  <a href="http://www.4399.com/">{{d.btitle}}</a>
                </li>-->
              </div>
          </ul>
        </div>
      </el-col>


      <!--<el-col :span="4"><div class="grid-content bg-purple">
          <ul style="width: 80px">
            <li class="m_header">关于我们</li>
            <li class="m_row"></li>
            <li>
              <a href>公司简介</a>
            </li>
            <li>
              <a href>联系我们</a>
            </li>
          </ul>
      </div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple">
        <ul style="width: 80px">
          <li class="m_header">商务合作</li>
          <li class="m_row"></li>
          <li>
            <a href>课程合作</a>
          </li>
          <li>
            <a href>项目合作</a>
          </li>
        </ul>
      </div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple">
        <ul style="width: 80px">
          <li class="m_header">常见问题</li>
          <li class="m_row"></li>
          <li>
            <a href>如何支付</a>
          </li>
          <li>
            <a href>如何学习</a>
          </li>
        </ul>
      </div></el-col>-->
      <el-col :span="5">
        <div class="grid-content bg-purple">
          <ul style="width: 200px">
            <li class="m_header">联系客服</li>
            <li class="m_row"></li>
            <li>
              <a href>客服QQ:3155237748</a>
            </li>
            <li>
              <a href>客服QQ:2108067059</a>
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <ul style="width: 80px">
            <li class="m_header">官方微信</li>
            <li>
              <img src="../assets/img/wx.jpg" width="96px" height="96px"/>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
    <el-row style="width: 60%;margin-left: 20%">
      <el-col :span="24">
        <div style="">
          <hr width="91%"/>
        </div>
      </el-col>
    </el-row>
    <el-row style="width: 60%;margin-left: 20%">
      <el-col :span="24">
        <div style="">
          <!--<ul id="bul">
            <li class="link_one">友情链接:</li>
            <li>
              <a href="https://www.roncoo.net/" target="_blank" title="领课网课">领课网课</a>
            </li>
            <li>
              <a href="https://edu.roncoo.net/" target="_blank" title="领课教育">领课教育</a>
            </li>
          </ul>-->
          <ul id="bul">
            <li class="link_one">友情链接:</li>
              <div v-for="lj in lianjie" :key="lj.id">
                <li>
                  <a :href="lj.linkUrl" target="_blank" :title="lj.linkName">{{lj.linkName}}</a>
                </li>
                <!--<li>
                  <a href="https://edu.roncoo.net/" target="_blank" title="领课教育">领课教育</a>
                </li>-->
              </div>
          </ul>
        </div>
      </el-col>
    </el-row>
    <el-row style="">
      <el-col :span="24">
        <div style="background: #666666;text-align: center">
          <span style="color: white">Copyright © 2015-2020 广州市领课网络科技有限公司 版权所有</span>
        </div>
      </el-col>
    </el-row>
    <div class="icp_num">
      <a href="https://www.roncoo.net/" target="_blank" class="lingke_link">领课教育云</a> 提供技术支持
      <span>&nbsp;|&nbsp;</span>
      <a href="http://www.beian.miit.gov.cn" target="_blank" class="c_ccc">粤ICP备16009964号</a>
      <span>&nbsp;|&nbsp;</span>
      <a
        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44010602005928"
        target="_blank"
        class="c_ccc"
      >
        <img src="../assets/img/ga.jpg" alt class="prn_icon" height="15px"/>&nbsp;粤公网安备 44010602005928号
      </a>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Bottom",
    data() {
      return {
        pageData:[],
        lianjie:[]
      }
    },created(){
        this.getData();
        this.getLianJie();
    },methods:{
      getData(){
        this.$axios2.get("homepage/home-bottompage/findByStatus").then(r=>{
          //alert(JSON.stringify(r.data))
          this.pageData=r.data;
        })
      },getLianJie(){
        this.$axios2.get("homepage/website-link/findByStatus").then(r=>{
          //alert(JSON.stringify(r.data))
          this.lianjie=r.data;
        })
      }
    }
  }
</script>

<style scoped>
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .m_row {
    width: 18px;
    height: 3px;
    background: #ccc;
  }

  .m_header {
    font-size: 20px;
    font-weight: bolder;
  }

  ul li {
    list-style-type: none;
    margin-bottom: 25px;
    color: #ccc;
  }

  a {
    color: #ccc;
    text-decoration: none;
  }

  #bul li {
    float: left;
    margin-left: 15px;
    margin-right: 15px;
  }

  .icp_num {
    line-height: 30px;
    text-align: center;
    color: #ccc;
    background-color: #333;
  }

  .icp_num .lingke_link {
    color: #ccc;
  }
</style>
